<template>
  <div>    
    <div>{{ topVal }}</div> 
    <div class="viewport"
    ref="viewport"
    :style="{height: itemHeight * count + 'px'}"
    @scroll="handleScroll"
    >
      <!-- 占位容器，撑开容器的高度 -->
      <div class="placeholder"
      :style="{height: allListData.length * itemHeight + 'px'}"
      ></div>
      <!-- 内容区域，只展示10条数据 -->
      <!-- <div class="list" :style="{top: topVal + 'px'}">
        <div
          v-for="item in showListData"
          :key="item.id"
          class="item"
          :style="{height: itemHeight + 'px'}"
        >
        {{ item.name }}
        </div>
      </div> -->
      <div class="list" :style="{top: topVal + 'px'}">
        <ipcTree
        :treeData="showListData"
        ></ipcTree>
      </div>
    </div>
  </div>
</template>

<script>
import ipcTree from './ipcTree.vue'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  components: {
    ipcTree
  },
  data () {
    return {
      itemHeight: 40,
      count: 10,
      allListData: {
        name: '根目录',
        showChildren: true,
        id: 1,
        ipc_list: [],
        children: [
          {
            name: '默认目录',
            id: 2,
            showChildren: true,
            ipc_list: [
            ],
            children: []
          },
          {
            name: '目录1',
            id: 3,
            showChildren: true,
            ipc_list: [],
            children: []
          },
          {
            name: '目录2',
            id: 4,
            showChildren: true,
            ipc_list: [],
            children: []
          },
        ]
      },
      startIndex: 0,
      endIndex: 10,
      topVal: 0, // 父元素滚动的位置
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData () {
      for (let i = 1; i <= 100; i++) {
        // 循环添加十万条数据
        this.allListData.children[0].ipc_list.push(
          { uuid: i, name: `ipc${i}`, value: i, ip: `1.1.1.${i}` }
        )
      }
      console.log(this.countItems(this.allListData), 'countItems');
    },
    handleScroll () {
      let scrollValue = this.$refs.viewport.scrollTop // 滚动的距离
      console.log(scrollValue, 'scrollValue');
      this.topVal = scrollValue
      this.startIndex = Math.floor(scrollValue / this.itemHeight) // 从第几个数据开始
      this.endIndex = this.startIndex + this.count
      // console.log(this.startIndex, this.endIndex, 'this.startInDEX, this.endIndex');
    },
    virtualScroll (treeData, offset, limit) {
      let visibleData = []
      let currentNode = treeData
      let currentOffset = 0
      // let parentNode = null

      while (currentNode && currentNode < offset + limit) {
        let dirs = currentNode.children ? currentNode.children : []
        let dir = dirs[currentOffset % dirs.length]
        currentOffset++

        if (dir) {
          let showChildren = dir.showChildren || false
          let item = {...dir}
          item.showChildren = false
          visibleData.push(item)

          if (showChildren && dir.showChildren) {
            item.children = this.virtualScroll(dir.children, 0, limit - visibleData.length)
            // parentNode = item
          } else if (dir.ipc_list) {
            // 对于ipc_list，我们可以选择保留或忽略父节点引用，根据实际需求来决定。  
            // item.ipc_list = dir.ipc_list; // IPCs are not recursive, so no need to virtual scroll them further  
            // parentNode = item; // 更新父节点引用（可选）  
          }
        }
        return visibleData
      }
    }, 
    countItems (node) {
      let totalCatalog = 0
      let totalIpc = 0
      // 展开节点才去遍历
      console.log(node, 'node');
      if (node.showChildren && node.children) {
        for (let child of node.children) {
          // 当前节点的数量+子节点的数量,子节点是否展开,下一次会判断
          totalCatalog = node.children.length + this.countItems(child)
          totalIpc += node.ipc_list.length
        }
      } else {
        // 不是showChildren,当前节点的数量++
        ++totalCatalog
      }
      return totalCatalog + totalIpc
    },
    changeShowData() {
      return this.allListData.children.slice(this.startIndex, this.endIndex + 20) 
    }
  },
  computed: {
    showListData() {
      return {...this.allListData, children: this.changeShowData()}
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.viewport {
  width: 200px;
  position: relative;
  overflow: auto;
  margin: auto;
}
.list {
  width: 200px;
  position: absolute;
}
.item {
  background-color: skyblue;
}
</style>
